.tableBlock {
  display: flex;
  flex-direction: column;
  overflow: auto;
  .wrap {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: auto;
    .filterBlock {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;
      margin-right: 6px;
      margin-top: 0;
      .search {
        flex: 1;
        margin: auto 5px auto auto;
        .input {
          flex: 1;
          width: 0;
        }
      }
      .select {
        border-radius: 5px;
        border: 1px solid fade(@color-white, 50%);
        height: 30px;
        line-height: 30px;
        padding: 2px 5px;
        background: none;
        color: @color-white;
        &:focus {
          border: 1px solid @color-white;
          outline: none;
        }
        margin: auto 5px auto auto;
        option {
          color: black;
        }
      }
    }
    table {
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
      border: 0;
      display: flex;
      flex-direction: column;
      table-layout: fixed;
      overflow: auto;
      thead, tbody, tfoot {
        tr {
          display: table;
          table-layout: fixed;
          width: 100%;
          th, td {
            padding: 5px;
            border: 1px solid fade(@color-white, 30);
            box-sizing: border-box;
          }
        }
      }
      .head {
        padding-right: 6px;
        tr {
          th {
            background-color: fade(@theme, 10);
            text-align: left;
            font-weight: normal;
          }
        }
      }
      .body {
        overflow: auto;
        overflow-x: hidden;
        padding-right: 5px;
        flex: 1;
        height: 0;
        tr {
          margin-top: -1px;
          //opacity: 0.6;
          color: @color-white;
          &:nth-child(odd) {
            background-color: fade(@theme, 5);
          }
          &:nth-child(even) {
          }
          &:hover {
            opacity: 1;
          }
          &.active {
            background-color: fade(@theme, 80);
            opacity: 1;
          }
          td {
            border-left: none;
            border-top: none;
            &:first-child {
              border-left: 1px solid fade(@color-white, 30);
            }
            &.level {
              .rel;
              padding-left: 15px;
              &:before {
                content: "";
                display: block;
                .abs;
                left: 5px;
                top: 50%;
                transform: translateY(-50%);
                width: 5px;
                height: 15px;
                background-color: #00BFFF;
                border-radius: 5px;
              }
              &.level1 {
                &:before {
                  background-color: #0f0;
                }
              }
              &.level2 {
                &:before {
                  background-color: #00beff;
                }
              }
              &.level3 {
                &:before {
                  background-color: #ffff00;
                }
              }
              &.level4 {
                &:before {
                  background-color: #ff8b00;
                }
              }
              &.level5 {
                &:before {
                  background-color: #ff0000;
                }
              }
            }
            &.noData {
              opacity: 0.5;
              &:before {
                content: "-";
              }
            }
          }
        }
      }
      .foot {
        padding-right: 6px;
      }
    }
  }

}